<template>
  <div>
    <el-button class="bg-green" type="primary" size="small" @click="showModifyDialog()">新增权益</el-button>
    <el-table v-loading="tableLoading" :data="tableList" :max-height="600" border highlight-current-row
              @sort-change="handleSortChange">
      <el-table-column label="图标" min-width="180" header-align="center" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row['iconUrl']" :preview-src-list="[scope.row['iconUrl']]" style="width: 60px;height: 60px;"/>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="文字" min-width="180" header-align="center" align="center"/>
      <el-table-column prop="sort" label="排序" width="180" header-align="center" align="center"/>
      <!--<el-table-column label="状态" min-width="120" header-align="center" align="center">
        <template slot-scope="scope">
          <div @click="changeTabbarItemStatus(scope['row'])">
            <el-tag v-if="scope.row.display===1" type="success" class="cursor-pointer">已启用</el-tag>
            <el-tag v-else type="info" class="cursor-pointer">已禁用</el-tag>
          </div>
        </template>
      </el-table-column>-->
      <el-table-column label="操作" min-width="160" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button
            type="success"
            class="bg-green"
            size="small"
            icon="el-icon-edit"
            circle
            @click="showModifyDialog(scope.row)"/>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            circle
            @click="doDelete(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page.sync="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      class="pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"/>

    <!--添加-->
    <el-dialog :visible.sync="modifyDialogVisible" :modal="false" :title="form['title']"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" center>
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="图标">
          <ws-upload-single-img v-model="form['iconId']"
                                :path="form['iconUrl']"
                                width="80" height="80"/>
          <div class="remark">*注:为保证显示效果,请上传80px*80px的图片</div>
        </el-form-item>
        <el-form-item label="文字">
          <el-input v-model="form['name']" maxlength="8" show-word-limit/>
        </el-form-item>
        <el-form-item label="权重">
          <el-input-number v-model="form['sort']"/>
          <div class="remark">*注：权重越大排序越前</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { handleSortChange, handleSizeChange, handleCurrentChange } from '../../../../utils/table'
  export default {
    data() {
      return {
        // 修改弹窗
        modifyDialogVisible: false,
        form: {
          title: '新增权益'
        },
        formRules: {},
        tableList: [],
        currentPage: 1,
        pageSize: this.$store.getters.userInfo.pageSize,
        pageSizes: [10, 20, 50, 100, 1000],
        total: 0
      }
    },
    created() {
      this.loadData();
    },
    methods: {
      handleCurrentChange, handleSizeChange, handleSortChange,
      loadData() {
        const url = '../videoAdmin/service/getList';
        const data = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        this.tableLoading = true;
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.tableList = res.data.list;
          this.total = res.data.count;
          this.tableLoading = false;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },
      // 显示编辑弹窗
      showModifyDialog(row) {
        this.modifyDialogVisible = true;
        this.form = row || {};
        this.form['title'] = row ? '编辑权益' : '添加权益'
      },

      // 提交
      submitForm(formName) {
        this.$refs[formName].validate(async(valid) => {
          if (valid) {
            const url = (this.form['id'] !== undefined && this.form['id'] != null && this.form['id'] !== '') ? '../videoAdmin/service/updateInfo' : '../videoAdmin/service/create';
            const data = Object.assign({}, this.form);
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.modifyDialogVisible = false;
              this.$message.success(res.msg);
              this.form = {};
              this.loadData();
            }).catch(e => {
              this.$message.error(e.msg)
            })
          }
        })
      },

      // 修改导航图标状态
      changeStatus(row) {
        row.status = row.status === 0 ? 1 : 0;
        const url = 'navigation/updateStatus';
        const data = { id: row.id, status: row.status };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.loadData();
        }).catch(e => {
          row.status = row.status === 0 ? 1 : 0;
          this.$message.error(e.msg);
        })
      },

      // 删除
      doDelete(row) {
        const url = '../videoAdmin/service/delete';
        const data = { id: row.id };
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.$message.success(res.msg);
          this.loadData();
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

</style>
